import React, { FC,useState,useEffect } from "react";
import { useRecoilValue } from "recoil";
import TodoListFilters from "./TodoListFilters";
import TodoListStats from "./TodoListStats";
import { filteredTodoListState } from "@recoil/selectors/todo/todoListFilterSelector";
import { TodoItemCreator, TodoItem } from "./TodoItemCreator";
import {test as testApi} from '@api/index'
import './test.css'

const TodoList:FC<{}> = () => {
    const [test,setTest] = useState('123')

    useEffect(()=>{
      testApi.getQuesInfo().then((res)=>{
        console.log(res,1212121);
        setTest('res')
      })
    },[])
    useEffect(()=>{
      testApi.getQuesList({test:'123456789'}).then((res)=>{
        console.log(res);
        setTest('res')
      })
    },[])
  
    const todoList = useRecoilValue(filteredTodoListState);

    return (<>
        <TodoListStats />
        <TodoListFilters />
        <TodoItemCreator />
        <div className={'test'}></div>
        {
        todoList.map((todoItem) => (
            <TodoItem item= { todoItem } key = { todoItem.id } />
        ))
    }
    </>)
    ;
  }
  
export default React.memo(TodoList);